<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-26 15:03:02
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-07-26 17:49:26
 * @FilePath: \vue3-admin-node\vue3-admin\src\views\set\components\editor.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  	<el-dialog v-model="dialogFormVisible" :title="title" width="600px" destroy-on-close>
		<div style="border: 1px solid #ccc">
			<!-- wangEditor结构 -->
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="yes">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref,shallowRef,onBeforeUnmount} from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css\
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { bus } from "@/utils/mitt.js"
import {ElMessage} from "element-plus"
import {changeCompanyIntroduce,getCompanyIntroduce} from '@/api/setting/index.ts'
const dialogFormVisible = ref(false)
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// mode
const mode = ref('default')
// 内容 HTML
const valueHtml = ref()
const toolbarConfig:any = {
	excludeKeys: []
}
const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {
			uploadImage: {
				//上传图片配置
				// server:  serverUrl.value, //上传接口地址
				fieldName: 'file', //上传文件名
				methods: 'post',
				metaWithUrl: true, // 参数拼接到 url 上
				// 单个文件上传成功之后
				// onSuccess(file, res) {
				// },
				// 自定义插入图片
				// customInsert(res, insertFn) {
				// 	insertFn(res.url)
				// },
			},
		}
	}
// 上传图片，修改 uploadImage 菜单配置
// 需要注意的是，如何去修改参数？
toolbarConfig.excludeKeys  = [
		'blockquote',
		'bgColor',
		'color',
		'group-more-style',
		'fontFamily',
		'bulletedList',
		'numberedList',
		'lineHeight',
		'todo',
		'emotion',
		'insertLink',
		'group-video',
		'insertTable',
		'codeBlock',
		'divider',
		'fullScreen',
		// 'group-image',
		// 排除菜单组，写菜单组 key 的值即可
    ]
const title = ref('')
	bus.on("editorTitle", async (id:any) => {
		if (id == 1) {
			valueHtml.value = ''
			title.value = '编辑公司介绍'
			const res  = await getCompanyIntroduce('公司介绍')
            if(res.status == 0){
                valueHtml.value = res.data
            }else{
                ElMessage.error('获取失败')
            }
		}
		if (id == 2) {
			valueHtml.value = ''
			title.value = '编辑公司架构'
			const res  = await getCompanyIntroduce('公司架构')
            if(res.status == 0){
                valueHtml.value = res.data
            }else{
                ElMessage.error('获取失败')
            }
		}
		if (id == 3) {
			valueHtml.value = ''
			title.value = '编辑公司战略'
			const res  = await getCompanyIntroduce('公司战略')
            if(res.status == 0){
                valueHtml.value = res.data
            }else{
                ElMessage.error('获取失败')
            }
		}
		if (id == 4) {
			valueHtml.value = ''
			title.value = '编辑公司高层'
			const res = await getCompanyIntroduce('公司高层')
            if(res.status == 0){
                valueHtml.value = res.data
            }else{
                ElMessage.error('获取失败')
            }
		}
	})
//点击取消的事件
const cancel = ()=>{
    dialogFormVisible.value = false
}
//点击确定事件
const yes = async()=>{
    //去除编辑
    const name = title.value.slice(-4)
    let data = {set_text:valueHtml.value, set_name:name}
    const res = await changeCompanyIntroduce(data)
    if(res.status == 0){
        ElMessage({
            type:'success',
            message:'编辑成功'
        })
        dialogFormVisible.value = false
        valueHtml.value = ''
    }else{
         ElMessage({
            type:'error',
            message:'编辑失败'
        })
    }
}
const handleCreated = (editor : any) => {
	editorRef.value = editor // 记录 editor 实例，重要！
}
// 暴露open方法
const open = () => {
	dialogFormVisible.value = true;
};
defineExpose({
	open,
});
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})
// 取消订阅/监听
onBeforeUnmount(() => {
	bus.all.clear()
})
</script>

<style scoped>
</style>
